
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="/fusion_charts/Charts/FusionCharts.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['annotatedtimeline']});
	google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawScatterChart);
    google.setOnLoadCallback(drawVisualization);
	
	function drawScatterChart(){
		/***********************************************************
		 * 				R-factor: scatter chart
		 ***********************************************************/
		var data = new google.visualization.DataTable();
		data.addColumn('datetime', 'Time');
		data.addColumn('number', 'R-factor');
		data.addRows(<%= @r_factor_gtable.size %>);
		<% i=0 %>
		<% for r in @r_factor_gtable.sort %>
			data.setValue(<%=i%>, 0, new Date(<%=r[0]*1000%>));
			data.setValue(<%=i%>, 1, <%=r[1]%>);
			<% i+=1%>
		<% end %>
		var scatter = new google.visualization.ScatterChart(document.getElementById('google_scatter_r_factor_'));
		var options = {};
		options['width'] = '900px';
		options['height'] = '400px';
		options['title'] = "R-factor";
		options['legend']= 'none';
		options['pointSize']=1;
        scatter.draw(data, options);
    
		
		var data = new google.visualization.DataTable();
		data.addColumn('datetime', 'Time');
		data.addColumn('number', 'PDV');
		data.addRows(<%= @pdv_gtable.size %>);
		<% i=0 %>
		<% for r in @pdv_gtable.sort %>
			data.setValue(<%=i%>, 0, new Date(<%=r[0]*1000%>));
			data.setValue(<%=i%>, 1, <%=r[1]%>);
			<% i+=1%>
		<% end %>
		var scatter_pdv = new google.visualization.ScatterChart(document.getElementById('google_scatter_pdv'));
		var options = {};
		options['width'] = '900px';
		options['height']= '400px';
		options['title'] = "PDV";
		options['pointSize'] = 1;
        scatter_pdv.draw(data, options);
	}
	
  </script>
  
  
  
</head>
<h2><%= "%s" % DateTime.parse(params[:date].gsub("_","\/")).strftime("%A, %m/%d/%Y") %></h2>
<br />
<br />
<div align="left" id="google_scatter_r_factor_" style="height: 400px;"> 
	scatter chart
</div>
<br />
<br />
<div align="left" id="google_scatter_pdv" style="height: 400px">
				Google Chart.
</div>
<br />
<br />
<!-- START Script Block for Chart packet_loss -->
<div align="center" id="packet_lossDiv">
				Chart.
</div> 
<script type='text/javascript'> 
//Instantiate the Chart 

	if( FusionCharts.setCurrentRenderer ) FusionCharts.setCurrentRenderer("flash"); 
	var chart_packet_loss=new FusionCharts('/fusion_charts/Charts/HeatMap.swf','packet_loss','900','400',0,0, '', '', '', '0', '0');
	 
	<!-- Provide entire XML data using DataXML method -->
	<% str_xml = render(:file=>"cdr/vcb_detail",:locals=>{:arr_data => @packet_loss, :caption=>"Packet Loss"}) %> 
	chart_packet_loss.setChartData('<%= raw(str_xml) %>', 'xml');
	 
	<!-- Finally render the chart. --> 
	chart_packet_loss.render('packet_lossDiv'); 
</script> 
<!-- END Script Block for Chart packet_loss -->






